import React, {useState, useEffect, useMemo} from 'react';
import {Spin, Empty} from 'antd';
import {cloneDeep} from 'lodash';
import {usePersistFn} from 'ahooks';

import {roomDetail} from '~/service/liveMonitor';
import TrendChart from '../common/trendChart';
import CommonCard from '../common/CommonCard';
import {ClientList, chartMap} from '../config.js';

const formatPointToPercent = value => `${Number(value * 100)}%`;

const withApiChart = Element => props => {
    const {
        searchParams,
        title,
        setFormLoading,
        ...restProps
    } = props;
    const [lineUnit, setLineUnit] = useState({});
    const [loading, setLoading] = useState(false);

    const run = usePersistFn(
        (params, title) => {

            const {dashBoardId, unitId} = chartMap.get(title);
            const dashBoardList = [
                {
                    dashBoardId,
                    dashBoardName: dashBoardId
                }
            ];

            const resultParams = {
                dashBoardList,
                dimensionAndValues: params
            };

            setLoading(true);
            setFormLoading(true);
            roomDetail(resultParams).then(res => {

                const {
                    data
                } = res;

                let lineUnit = {};
                if (data && data[dashBoardId] && data[dashBoardId][unitId]) {
                    lineUnit = data[dashBoardId][unitId];
                }
                setLineUnit(lineUnit);
                setLoading(false);
                setFormLoading(false);
            });
        }
    );

    useEffect(() => {
        if (searchParams.length > 0) {
            run(searchParams, title);
        }
    }, [searchParams, run, title]);


    return (
        <>
            {
                (Object.keys(lineUnit || {})?.length > 0 && lineUnit?.chart)
                    ? (
                        <Element
                            {...restProps}
                            chartData={lineUnit}
                            loading={loading}
                        />
                    )
                    : <Spin spinning={loading}><Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /></Spin>
            }
        </>
    );
};


const ChartsContainer = ({searchParams, setFormLoading}) => {

    const SingleChart = useMemo(() => withApiChart(TrendChart), []);

    return (
        <>
            <CommonCard title="连接成功率/人头率">
                <SingleChart
                    searchParams={searchParams}
                    title="roomServer连接成功率/人头率"
                    yAxisLabel={{formatter: '{value}'}}
                    dataZoom
                    gridBottom={80}
                    setFormLoading={setFormLoading}
                />
            </CommonCard>
            <CommonCard title="请求次数/人数">
                <SingleChart
                    searchParams={searchParams}
                    title="roomServer请求次数/人数"
                    yAxisLabel={{formatter: '{value}'}}
                    dataZoom
                    gridBottom={80}
                    setFormLoading={setFormLoading}
                />
            </CommonCard>
            <CommonCard title="失败次数/人数">
                <SingleChart
                    searchParams={searchParams}
                    title="roomServer失败次数/人数"
                    yAxisLabel={{formatter: '{value}'}}
                    dataZoom
                    gridBottom={80}
                    setFormLoading={setFormLoading}
                />
            </CommonCard>

            <CommonCard title="连接平均时长">
                <SingleChart
                    searchParams={searchParams}
                    title="连接平均时长"
                    yAxisLabel={{formatter: '{value}'}}
                    dataZoom
                    gridBottom={80}
                    setFormLoading={setFormLoading}
                />
            </CommonCard>
        </>
    );
};

export default ChartsContainer;
